<template>
	<!-- 遮罩层 也是整个组件的容器-->
	<el-dialog title="提示" :visible.sync="dialogVisible" :width="dialogWidth" :before-close="close">
		<div class="dialog_wrapper">
			<i class="dialog_icon c_success el-icon-circle-check " v-if="type=='success'"></i>
			<i class="dialog_icon c_warning el-icon-warning-outline " v-else-if="type=='warning'"></i>
			<i class="dialog_icon c_error el-icon-circle-close " v-else-if="type=='error'"></i>
			<i class="dialog_icon c_warning el-icon-question " v-else-if="type=='confirm'"></i>
			<i class="dialog_icon c_primary el-icon-info " v-else></i>
			<div class="dialog_tit" :class="type=='error'?'c_error':''" v-html="title"></div>
			<div class="dialog_con" v-html="content"></div>
			<div class="count_tip" v-if="autoClose&&autoCloseTxt">
				<span v-text="countDownNum"></span>s后<span v-text="autoCloseTxt"></span>
			</div>
		</div>
		<div slot="footer" class="dialog-footer" v-if="showConfirm||showCancel">
            <el-button v-if="showConfirm" type="primary" @click="confirm" v-text="confirmTxt">确 定</el-button>
		    <el-button v-if="showCancel" @click="cancel" v-text="cancelTxt">取 消</el-button>

	  	</div>
	</el-dialog>
</template>

<script>
	export default {
		name: 'message',
		props: {
			dialogVisible: {
				type: Boolean,
				default: false,
			},
			dialogWidth:{
				type:String,
				default:"380px"
			},
			type: {
				type: String,
				default: 'success',
			},
			title: {
				type: String,
				default: '',
			},
			content: {
				type: String,
				default: '',
			},
			showConfirm:{
				type: Boolean,
				default: false,
			},
			showCancel:{
				type: Boolean,
				default: false,
			},
			confirmTxt:{
				type: String,
				default: '确定',
			},
			cancelTxt:{
				type: String,
				default: '取消',
			},
			confirmCall:{//确认回调
				type:Function,
				default:()=>{
					return ()=>{}
				}
			},
			cancelCall:{//取消回调
				type:Function,
				default:()=>{
					return ()=>{}
				}
			},
			autoClose:{
				type: Boolean,
				default: false,
			},
			autoCloseTxt:{
				type: String,
				default: '',
			},
			closeCall:{//关闭回调
				type:Function,
				default:()=>{
					return ()=>{}
				}
			},
			duration:{//倒计时 单位秒
				type:Number,
				default:3
			}
		},
		mounted(){
			this.countDownNum=this.duration
		},
		data(){
			return {
				countDownNum:3,
				time:""
			}
		},
		methods:{
			countDown(callback){
				let closeToUrl=this.closeToUrl;
				this.time=setInterval(()=>{
					let n=this.countDownNum;
					n--;
					this.countDownNum=n;
					if(n==0){
						this.close();
					}

				},1000)
			},
			close(){
				this.dialogVisible=false
				clearInterval(this.time);
				let closeCall=this.closeCall;
				typeof closeCall == "function" && closeCall();
			},
			cancel(){
				let cancelCall=this.cancelCall;
				typeof cancelCall == "function" && cancelCall();
				this.close();
			},
			confirm(){
				let confirmCall=this.confirmCall;
				typeof confirmCall == "function" && confirmCall();
				this.close();
			}
		}
	};
</script>
<style lang="scss" scoped>
.dialog_wrapper{
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0 0 36px;
}
.dialog_icon{
	font-size: 40px;
	line-height: 50px;
}
.dialog_tit{
	margin:14px 0;
	font-size: 16px;
	color: #333;
}
.dialog_con{
	font-size:14px;
	color: #999;
}
.count_tip{
	margin-top: 24px;
	font-size: 12px;
	color: #1890FF;
}
.c_success{
	color: #6fca4b;
}
.c_warning{
	color: #E6A23C;
}
.c_error{
	color: #FF3E3E;
}
.c_primary{
	color: #409EFF;
}
    .dialog-footer{
        ::v-deep .el-button {
            min-width: 56px;
            height: 32px;
            font-size: 14px !important;
            border-radius: 4px !important;
            font-family: Microsoft YaHei;
            font-weight: 400;
            padding: 0;
            line-height: 30px;
        }
    }
</style>
